<!--  -->
<template>
    <div> 
<!--内容-->
<div class="m-pad-tb-big m-opacity m-container animated fadeIn">
    <div class="ui container">
        <!--header-->
        <div class="ui segment top attached">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h4 class="ui teal header">推荐番剧</h4>
                </div>
                <div class="right aligned column">
                    共 <h3 class="ui orange header m-inline-block m-text-thin">{{animeList.total}}</h3> 部
                </div>
            </div>
        </div>
        <div class="ui segment attached">
            <div class="m-anime-container m-pad-tb-large">
            <ul class="m-anime-ul" id="m-anime-ul">
                <li class="m-anime-li" v-for="anime in animeList.list" :key="anime.id">
                    <a class="m-anime-image-a" :href="anime.src" target="_blank">
                        <img  class="m-anime-image-img scrollLoading" src="../../assets/images/siyue.jpg" alt=""/>
                    </a>
                    <a class="m-anime-info-a" :href="anime.src" target="_blank">
                        <h4 class="m-anime-info-title">
                            {{anime.name}}
                        </h4>                          
                        <div class="m-anime-info-desc">
                            <div style="margin-bottom:5px;">开播时间：{{anime.createTime | formatDate("YYYY-MM-DD")}}</div> 
                            <div>观看时间：{{anime.watchTime | formatDate("YYYY-MM-DD")}}</div> 
                        </div>
                    </a>
                </li>
            </ul>
            </div>
        </div>
        <!--footer-->
        <div class="ui bottom attached segment attached">
            <div class="ui center aligned middle aligned grid stackable">
                <div class="four wide column">
                    <button class="ui button teal basic"  @click="getAnimeList(animeList.pageNum-1)" v-if="!animeList.isFirstPage">上一页</button>
                </div>

                <div class="eight wide column">
                    <p class="m-text-spaced-max">{{animeList.pageNum}}/{{animeList.pages}}</p>
                </div>

                <div class="four wide column">
                    <button class="ui button teal basic"  @click="getAnimeList(animeList.pageNum+1)" v-if="!animeList.isLastPage">下一页</button>
                </div>
            </div>
        </div>
    </div>
</div>
<br/>
<br/>
<br/>

    </div>
</template>

<script>
export default {
    data () {
        return {
            animeList:"",
            ImgDomainName:this.$ImgDomainName
        };
    },
    methods:{
        getAnimeList(pageNum){
            var _this=this
            _this.axios.get("/getShowAnime",{
                params:{
                    pageNum:pageNum
                }
            }).then((res) => {
                $(window).scrollTo(0,400)
                _this.animeList = res.data.pageInfo
                this.$nextTick(()=>{
                    $(".scrollLoading").scrollLoading()
                })
            }).catch((err) => {
                console.log(err)
            });
        },
    },
    created(){
        this.getAnimeList()
    },
}

</script>
<style lang='scss' scoped>
</style>